<template>
  <div>
    <el-calendar>
      <template
              slot="dateCell"
              slot-scope="{date, data}">
        <div>
          {{ data.day.split('-').slice(1).join('-') }}

          <div v-for="(item, index) in calendarData.data.day" :key="index">
            <span v-if="new Date() > new Date(item) ? pastTime = true : pastTime = false"></span>

            <div v-if="item == data.day" :class="pastTime ? 'is-selected-past' : 'is-selected'">
              <div>✔ 已有预约</div>

            </div>
          </div>
        </div>

      </template>

    </el-calendar>
  </div>
</template>

<script>
  import {request} from "../../../util/network/request";
  import {SCHEDULING_GRT_BY_USER_ID} from "../../../util/network/api/order/api-order";

  export default {
    name: "MyScheduling",
    data(){
      return {
        uid: this.$route.params.uid,
        appointmentScheduling: [],
        calendarData: {
          date: new Date(),
          data: {
            type: "current-month",
            isSelected: true,
            day: []
          }
        },
        pastTime: false,

      }
    },
    mounted() {
      this.getSchedulingByUserId(this.uid);
    },

    methods: {
      //获取排期
      getSchedulingByUserId(uid) {
        request({
          url: SCHEDULING_GRT_BY_USER_ID + uid
        }).then(res => {
          console.log(res);
          this.appointmentScheduling = res.data.data;

          //取出日期，不要时间
          for (let i = 0; i < this.appointmentScheduling.length; i++) {
            this.calendarData.data.day.push(
                this.appointmentScheduling[i].startDateTime.split(' ')[0]
            );
          }

          console.log(this.calendarData.data.day);
        }).catch(err => {
          console.log(err)
        })
      },
    }
  }
</script>

<style scoped>
  .is-selected {
    color: #00ffae;
  }

  .is-selected-past {
    color: #C0C4CC;
  }
</style>
